<template>
    <div>
        <foo :content="content" @echo="onEcho">
            <b>lllasasfas</b>
        </foo>
        <wrapFoo :content="content" @echo="onEcho">
            <b>lllasasfas</b>
        </wrapFoo>
        <!-- <foo 
            :content="content"
            :persons="persons"
            @echo="onEcho">
            <template v-slot>
                <b>this is default slot</b>
            </template>
            <template v-slot:footer>
                <b>this is footer slot</b>
            </template>
            <template v-slot:header="scoped">
                <b>this is footer slot {{scoped.content}}</b>
            </template>                      
        </foo>

        <wrapFoo
            :content="content"
            :persons="persons"
            @echo="onEcho">
            <template v-slot>
                <b>this is default slot</b>
            </template>
            <template v-slot:footer>
                <b>this is footer slot</b>
            </template> 
            <template v-slot:header="scoped">
                <b>this is footer slot {{scoped.content}}</b>
            </template>             
        </wrapFoo> -->
    </div>
</template>

<script>
import foo from './foo'
import wrapFoo from './wrapFoo'
export default {
    name: 'template-app',

    components: {
        foo,
        wrapFoo,
    },

    data () {
        return {
            content: 'this is template',
            persons: [{
                name: 'jake',
                age: 20,
            }, {
                name: 'eric',
                age: 21
            }]
        }
    },

    methods: {
        onEcho (msg) {
            console.log('Tempate app: ', msg)
        }
    }
}
</script>

<style>

</style>
